import React, {useEffect, useLayoutEffect} from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import DetailsScreen from 'pages/DetailScreen/Details/Details';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Participants from 'pages/DetailScreen/Participants';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {Image} from 'react-native-elements';
import {LayoutAnimation, StyleSheet, Text, View} from 'react-native';
import {useSelector} from 'react-redux';
import {selectActiveTab, selectEventDetail} from 'reduxState/selectors';
import Comments from 'pages/DetailScreen/Comments';
import UserSummary from 'pages/UserScreen/UserSummary';
import Likes from 'pages/UserScreen/Likes';
import Going from 'pages/UserScreen/Going';
import Past from 'pages/UserScreen/Past';
import {navDispatch} from 'utils/navigationService';
import {StackActions} from '@react-navigation/native';
export type TabParamList = {
  Details: undefined;
  Participants: undefined;
  Comments: undefined;
  [key: string]: undefined;
};

const {Navigator, Screen} = createMaterialTopTabNavigator<TabParamList>();
export interface Props {
  navigation: any;
  route: any;
}
function UserTabNavigator({navigation, route}: Props) {
  const activeTab = useSelector(selectActiveTab);
  LayoutAnimation.linear();
  // 设置顶部右侧导航
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity
          style={styles.headerIconContainer}
          onPress={() => {
            navDispatch(StackActions.popToTop());
          }}>
          <Image
            style={styles.headerIcon}
            source={require('assets/icons/home.png')}
          />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    <>
      <View style={styles.borderBtLine}>
        <UserSummary />
      </View>
      <Navigator
        initialRouteName={activeTab}
        tabBarOptions={{
          activeTintColor: '#AECB4F',
          inactiveTintColor: '#8C8C8C',
          labelStyle: {
            fontSize: 12,
            lineHeight: 12,
          },
          showIcon: true,
          indicatorStyle: {
            height: 0,
          },
          tabStyle: {
            flexDirection: 'row',
          },
          iconStyle: {
            height: 18,
            marginRight: -4,
          },
          //style: {backgroundColor: 'powderblue'},
        }}>
        <Screen
          name="Likes"
          component={Likes}
          options={{
            tabBarLabel: 'Likes',
            tabBarIcon: ({focused, color}) => {
              return <Icon name="heart" size={18} color={color} />;
            },
          }}
        />
        <Screen
          name="Going"
          component={Going}
          options={{
            tabBarLabel: 'Going',
            tabBarIcon: ({focused, color}) => {
              return <Icon name="checkmark-circle" size={18} color={color} />;
            },
          }}
        />
        <Screen
          name="Past"
          component={Past}
          options={{
            tabBarLabel: 'Past',
            tabBarIcon: ({focused, color}) => {
              return (
                <Icon name="color-palette-outline" size={18} color={color} />
              );
            },
          }}
        />
      </Navigator>
    </>
  );
}

export default UserTabNavigator;
const styles = StyleSheet.create({
  borderBtLine: {
    borderBottomColor: '#E8E8E8',
    borderBottomWidth: 1,
    borderStyle: 'solid',
  },
  headerIconContainer: {
    paddingLeft: 20,
  },
  headerIcon: {
    width: 24,
    height: 24,
  },
});
